


;( function( window ) {
    'use strict';
    function MrcodePopLayer(params) {
        if (!params) {
            throw new error("初始化参数必选");
        }
        var me = this;
        this.components = {}; //组件所有初始化后组成的零散组件都在这里
        this.params = params;
        initContainer(me);
        handerIcon(me);
        handerTitle(me);
        handerContent(me);
        handerToolbar(me);
        if (params.position == "center") {
            centerModals(this.components.ass_container);
            hs(this.components.ass_container);
        }
        api_open(me);
        handerAutoclose(me);
    }

    /** 关闭窗体 */
    MrcodePopLayer.prototype.close = function () {
        api_close(this);
    };


    //大容器
    function initContainer(me) {
        var components = me.components;
        var $container = createTag("div");
        $container.addClass("poplayer-container modal center shown");
        /** 最外层的大容器 */
        components.ass_container = $container;
        initOverlay(me);
        initFixer(me);
    }

    //遮罩层
    function initOverlay(me) {
        var components = me.components;
        var $overlay = createTag("div");
        $overlay.addClass("poplayer-overlay");
        components.ass_container.append($overlay);
        /** 遮罩层 容器 */
        components.ass_overlay = $overlay;
    }

    //内容层外层容器
    function initFixer(me) {
        var components = me.components;
        var $fixer = createTag("div");
        $fixer.addClass("poplayer-fixer");
        components.ass_container.append($fixer);
        /** 内容层外层容器 */
        components.ass_fixer = $fixer;
        initOuter(me);
    }

    //内容层里层容器
    function initOuter(me) {
        var components = me.components;
        var $outer = createTag("div");
        $outer.addClass("poplayer-outer");
        components.ass_fixer.append($outer);
        /** 内容层里层容器 */
        components.ass_outer = $outer;
        initOuter_content(me);
        initToolbar(me);
    }

    //内容展示层容器
    function initOuter_content(me) {
        var components = me.components;
        var $outer_content = createTag("div");
        $outer_content.addClass("poplayer-content");
        components.ass_outer.append($outer_content);
        /** 内容展示层容器 */
        components.ass_outer_content = $outer_content;

        initIcon(me);
        initTitle(me);
        initMessage(me);
    }

    //工具按钮容器
    function initToolbar(me) {
        var components = me.components;
        var $toolbar = createTag("div");
        $toolbar.addClass("poplayer-toolbar inline");
        components.ass_outer.append($toolbar);
        /** 工具按钮容器 */
        components.ass_toolbar = $toolbar;
    }

    //标题容器
    function initTitle(me) {
        var components = me.components;
        var $title = createTag("h1");
        $title.addClass("poplayer-title");
        components.ass_outer_content.append($title);
        /** 标题容器 */
        components.ass_title = $title;
    }

    //内容容器
    function initMessage(me) {
        var components = me.components;
        var $message = createTag("div");
        $message.addClass("poplayer-message");
        components.ass_outer_content.append($message);
        /** 内容容器 */
        components.ass_outer_message = $message;
    }

    //图标容器
    function initIcon(me) {
        var components = me.components;
        var $icon = createTag("span");
        components.ass_outer_content.append($icon);
        /** 图标容器 */
        components.ass_outer_icon = $icon;
    }

    //处理图标
    function handerIcon(me) {
        var components = me.components;
        var params = me.params;
        var icon = params.icon;
        if (icon) {
            components.ass_outer_icon.addClass(icon);
        }
    }

    //处理标题
    function handerTitle(me) {
        var components = me.components;
        var params = me.params;
        var title = params.title;
        if (title) {
            components.ass_title.text(title);
        }
    }

    //处理内容
    function handerContent(me) {
        var components = me.components;
        var params = me.params;
        var content = params.content;
        if (content) {
            components.ass_outer_message.html(content);
        }else{
            components.ass_outer_message.html(params);
        }
    }

    function handerToolbar(me) {
        var params = me.params;
        var dialog = params.dialog;
        var buttons = params.buttons;
        if ("confirm" == dialog) {
            handerToolbar_confirm(me);
        }else if(buttons){
            handerToolbar_buttons(me);
        }
    }

    function handerToolbar_confirm(me) {
        var components = me.components;
        var params = me.params;
        var onConfirm = params.onConfirm;
        var onCancel = params.onCancel;
        if (onConfirm) {
            var style = (onConfirm.style ? onConfirm.style : "danger");
            var $btn = newBtn(style);
            components.ass_toolbar.append($btn);
            var text = (onConfirm.text ? onConfirm.text : "Confirm");
            $btn.text(text);
            $btn.on("click", function () {
                var action = onConfirm.action;
                if (action) {
                    if (action(me)) {
                        api_close(me);
                    }
                } else {
                    api_close(me);
                }
            });
        }
        if (onCancel) {
            var style = (onCancel.style ? onCancel.style : "default");
            $btn = newBtn(style);
            components.ass_toolbar.append($btn);
            var text = (onCancel.text ? onCancel.text : "Concel");
            $btn.text(text);
            $btn.on("click", function () {
                var action = onCancel.action;
                if (action) {
                    if (action(me)) {
                        api_close(me);
                    }
                } else {
                    api_close(me);
                }
            });
        }
    }
    /** 处理多按钮：Multiple Buttons,默认样式为 primary */
    function handerToolbar_buttons(me){
        var buttons = me.params.buttons;
        $.each(buttons,function (index,value){
       /*     var text = value.text;
            var style = value.style;
            var action = value.action;*/
            addBtn(me,value,"primary");
        });
       /* var primary = buttons.primary;
        var success = buttons.success;
        var info = buttons.info;
        var danger = buttons.danger;
        var close = buttons.close;
        if(primary){
            addBtn(primary,"primary","primary");
        }
        if(success){
            addBtn(success,"success","success");
        }
        if(info){
            addBtn(info,"info","info");
        }
        if(danger){
            addBtn(danger,"danger","danger");
        }
        if(close){
            addBtn(close,"close","close");
        }*/
    }

    /**
     *  添加按钮，最常用的添加按钮方法
     * @param  me 弹窗对象
     * @param btnParams 参数
     * @param defStyle 默认样式
     * @param defText 默认文字
     * @param defAction 默认处理
     */
    function addBtn(me,btnParams,defStyle,defText,defAction){
        var components = me.components;
        var params = me.params;
        var style = (btnParams.style ? btnParams.style : defStyle);
        var $btn = newBtn(style);
        components.ass_toolbar.append($btn);
        defText = (btnParams.text ? btnParams.text : style);
        var text = (btnParams.text ? btnParams.text : defText);
        $btn.text(text);
        $btn.on("click", function () {
            var action = (btnParams.action?btnParams.action:defAction);
            if (action) {
                if (action(me)) {
                    api_close(me);
                }
            } else {
                api_close(me);
            }
        });
    }

    /** 打开窗体 */
    function api_open(me) {
        var components = me.components;
        var params = me.params;
        var animateEntrance = params.animateEntrance;
        $("body").append(components.ass_container);
        if (animateEntrance) {
            addAni(components.ass_outer, animateEntrance);
        } else {
            addAni(components.ass_outer, "fadeIn");
        }
    };
    /** 关闭弹窗 */
    function api_close(me) {
        var components = me.components;
        var params = me.params;
        var animateClosing = params.animateClosing;
        var aniName;
        if (animateClosing) {
            aniName = animateClosing;
        } else {
            aniName = "fadeOut";
        }
        addAni(components.ass_container, "fadeOut");
        addAni(components.ass_fixer, aniName, function () {
            components.ass_container.remove();
        });
    }

    /** 自动关闭窗体 */
    function handerAutoclose(me){
        var params = me.params;
        var autoClose = params.autoClose;
        var timeout = params.timeout;
        if(autoClose){
            if(!timeout){
                timeout = 2000;
            }
            window.setTimeout(function(){
                api_close(me);
            },timeout);
        }

    }

    function newBtn(style) {
        var $btn = createTag("a");
        $btn.attr("href", "javascript:void(0)");
        $btn.addClass("poplayer-button");
        if (style) {
            $btn.addClass(style);
        }
        return $btn;
    }

    /**
     * 绝对垂直居中
     * @param target
     */
    function centerModals(target) {
        $(target).each(function (i) {
            var $clone = $(this).clone().css('display', 'block').appendTo('body');
            var top = Math.round(($clone.height() - $clone.find('.poplayer-fixer').height()) / 2);
            top = top > 0 ? top : 0;
            $clone.remove();
            $(this).find('.poplayer-fixer').css("margin-top", top);
        });
    }

    /*判断手机横竖屏状态：*/
    function hengshuping() {
        if (window.orientation == 180 || window.orientation == 0) {
            centerModals(me.ass_container);
        }
        if (window.orientation == 90 || window.orientation == -90) {
            centerModals(me.ass_container);
        }
    }

    function hs() {
        window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", hengshuping, false);
    }

    /**
     * 添加动态效果，
     * @param target 目标窗体jquery对象
     * @param aniName animated 中的效果名称
     * @param fun 效果执行完成后，需要执行的方法
     */
    function addAni(target, aniName, fun) {
        target.addClass(aniName + ' animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
            $(this).removeClass(aniName + ' animated');
            if (fun) {
                fun();
            }
        });
    }
    /**
     * 创建标签元素
     * @param name
     */
    function createTag(name) {
        return $("<" + name + "></" + name + ">");
    }


    /**
     * 弹窗层插件
     * 必须依赖文件：
     *  1. bootstrap.min.css
     *  3. poplayer.css
     *  4. jquery.min.js
     *  5. poplayer.js
     * 可选：
     *  1. animate.css 动画效果
     *  2. font-awesome icon图标支持
     *
     *
     * 参数说明：
     *  position： 定位类型: 默认水平居中,且垂直顶部20%；"center": 水平垂直居中；
     *  icon : [该功能有可能作废] awesome 图标,class名称可以组合，如动态旋转的星星icon-star icon-spin
     *  animateEntrance ： 窗体进入效果css名称
     *  animateClosing ：窗体关闭退出效果css名称
     *  autoClose ：是否自动关闭窗体
     *  autoclose_timeout : 是否自动关闭窗体:超时 默认2秒(2000毫秒)
     *
     *  title : 窗体标题；默认无
     *  content ： 展示内容：可以是文字，可以是html代码等
     *
     * 按钮通用属性：
     *              text:按钮标题，
     *              style：按钮样式：primary、success、info、danger、close
     *              action：按钮回调函数，如果此参数有值，返回true,才会关闭窗体，me:弹窗对象
     *
     *  buttons ： 按钮数组：
     *          btn定制对象:{ text: 'Info', style: 'info',action:function(me){}}
     *          默认值：
     *          text ： 跟随style的名称
     *          style ： primary
     *          action ： action默认行为：关闭窗体
     *

     * dialog ：弹窗类型，写支持的类型，将对按钮支持提供不同的处理
     *      1. confirm ： 将只支持两种属性,且将忽略对 buttons 属性的处理
     *          onConfirm : 确定按钮的按钮对象
     *          onCancel ：取消按钮的对象，
     *
     *
     * 使用示例：
     * 1.最简单入门： 只有一个最简洁的窗口提示，没有任何关闭等的按钮；是为了做自动关闭提示做准备
     *      new MrcodePopLayer("登录成功！")
     * 2.loading 加载效果：
     var mp =  new MrcodePopLayer({
                'position': "center",
                'icon': "icon-spinner icon-2x icon-spin",
                'content': "请稍后.."
            });
     mp.close(); //手动调用关闭该窗体

     * 3. 确认/取消框：
     *      下面的是弹出一个提示框，有取消[我还不想登录]按钮：点击后就关闭窗体，有确定按钮[去登录]：将回调action方法，并关闭窗体
     *       下面还配合了animate.css中的动画效果，让窗体显示更有趣味性
     var params = {
            'position':"center",
            'animateEntrance':'flipInX',
            'animateClosing':'flipOutX',
            'content':"请先登录",
            'dialog':"confirm",
            'onCancel':{text: '我还不想登录'},
            'onConfirm':{
                text: '去登录',
                action:function(){
                    window.location.href = "/account/login";
                    return true;
                }
            }
       }
     new MrcodePopLayer(params);

     * 4. 按钮工具
     var params = {
        'title':"工具条",
        'content':"请按您的需要选择以下功能使用",
        'buttons':[
            { text: '信息按钮样式', style: 'info',action:function(me){
                alert("信息");
                return true;
            }},
            { text: '主要的', style: 'primary'},
            { style: 'primary'},
            { style: 'success'},
            { style: 'info'},
            { style: 'danger'},
            { style: 'close'}
        ]
    }
     new MrcodePopLayer(params);
     */
    window.MrcodePopLayer = MrcodePopLayer;
})( window );






